<template>
  <div style="background-color: #eaedf1;">
    <div>
      <div style="float: left;width: 50%;">
        <el-card class="box-card">
          <div style="color:#409eff;padding-bottom: 20px;">欢迎登录新冠疫情可视化平台</div>
          <div slot="header" class="clearfix">
            <span><i class="iconfont icon-yonghu" style="font-size: 25px;"></i>
            </span>
            <span>用户信息</span>
            <el-button style="float: right; padding: 3px 0" type="text">用户中心</el-button>

          </div>
          <div>
            <el-table :data="userInfo" border style="width: 100%">
              <el-table-column prop="username" label="用户名称">
              </el-table-column>
              <el-table-column prop="gender" label="用户性别">
              </el-table-column>
              <el-table-column prop="roles[0].name" label="用户身份">
              </el-table-column>
              <el-table-column prop="address" label="用户地址">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card class="box-card box-card2">
          <div style="margin-left: 20px;">
            <div class="div_content" @click="ToManger">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-tubiaozhizuomobanyihuifu-"></use>
              </svg>
              <div>疫情管理</div>
            </div>

            <div class="div_content" @click="ToData">
              <svg class=" iconfont" aria-hidden="true">
                <use xlink:href="#icon-zu"></use>
              </svg>
              <div>数据统计</div>
            </div>

            <div class="div_content" @click="ToDy">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-zhongxindongtaifabu"></use>
              </svg>
              <div>疫情动态</div>
            </div>

            <div class="div_content" @click="ToHos">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-yy"></use>
              </svg>
              <div>定点医院</div>
            </div>

          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 10px;">
          <h3>用户登入统计</h3>
          <div id="user_content" style="height: 220px;"></div>
        </el-card>
      </div>

      <div style="float: right;width: 48%;">
        <el-card class="box-card3">
          <div class="block">
            <el-carousel height="200px">
              <el-carousel-item v-for="item in photo" :key="item.id">
                <img :src='item.url' alt="" style="height: 200px;width: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
          <h3>每日新闻</h3>
          <div>
            <el-card class="box-card3">
              <div v-for="(item,index) in article.list" :key="item.id">
                <div class="logo">
                  <div></div>
                  <div class="new" v-if="index == 0">最 新</div>
                  <div>{{item.publishTime | dataFMT}}</div>
                </div>
                <div style="background-color:#fff;padding:10px;border-radius:5px;border-bottom: 1px dotted #ccc;">
                  {{item.title}}</div>
              </div>
            </el-card>
            <el-pagination @size-change="change_size" @current-change="change_page" :current-page="obj.page"
              :page-sizes="[5,10,15]" :page-size="obj.pageSize" layout="total, sizes, prev, pager, next"
              :total="article.total">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>


  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'

  export default {
    data() {
      return {
        obj: {
          page: 1,
          pageSize: 5,
        },
        photo: [{
            id: 1,
            url: require('../../assets/404_images/001.jpg')
          },
          {
            id: 2,
            url: require('../../assets/404_images/700.jpg')
          },
          {
            id: 3,
            url: require('../../assets/404_images/banner2.jpg')
          }
        ]
      }
    },
    created() {
      var token = localStorage.getItem('token')
      var obj = {
        token
      }
      this.userInfo_query(obj);
      this.page_query_article(this.obj)
    },
    mounted() {
      this.initEchart()
    },
    computed: {
      ...mapState('home', ['userInfo']),
      ...mapState("article", ['article']),
    },
    methods: {
      ...mapActions("article", ["page_query_article"]),
      ...mapActions('home', ['userInfo_query']),
      // 改变页码
      change_page(val) {
        // console.log(val)
        this.obj.page = val;
        this.page_query_article(this.obj)
      },
      // 改变大小
      change_size(size) {
        this.obj.pageSize = size;
        this.page_query_article(this.obj)
      },
      ToManger() {
        this.$router.push({
          path: '/manage/article',
        })
      },
      ToData() {
        this.$router.push({
          path: '/map/index',
        })
      },
      ToDy() {
        this.$router.push({
          path: '/dynamic/index',
        })
      },
      ToHos() {
        this.$router.push({
          path: '/hospital/index',
        })
      },
      // 初始化图标
      initEchart() {
        // 销毁图表  实时刷新数据
        // echarts.init(document.getElementById('content')).dispose();
        // 初始化图表
        var myChart = echarts.init(document.getElementById('user_content'));

        // 指定图表的配置项和数据
        var option = {
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['product', '全部', '我', ''],
            source: [{
                product: '12-31',
                '全部': 43,
                '我': 15,

              },
              {
                product: '1-1',
                '全部': 85,
                '我': 60,

              },
              {
                product: '1-2',
                '全部': 50,
                '我': 43,

              },
              {
                product: '1-3',
                '全部': 80,
                '我': 42,
              },
              {
                product: '1-8',
                '全部': 50,
                '我': 20,
              },
              {
                product: '1-10',
                '全部': 81,
                '我': 50,
              }
            ]
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          series: [{
              type: 'bar'
            },
            {
              type: 'bar'
            },
            {
              type: 'bar'
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
  }

</script>

<style scoped>
  .logo {
    overflow: hidden;
    margin-bottom: 5px;
  }

  .logo div {
    float: left;
    margin-right: 5px;
  }

  .logo div:first-child {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #005dff;
    margin-top: 4px;
  }

  .logo .new {
    background-color: #f43b3b;
    padding: 3px;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
  }

  .box-card {
    /* width: 50%; */
  }

  .box-card svg {
    margin-left: 20px;
  }

  .box-card2 {
    margin-top: 10px;

  }

  .div_content {
    float: left;
    padding-bottom: 10px;
  }

  .div_content div {
    padding-top: 5px;
    padding-left: 35px;
    font-size: 17px;
  }

  .iconfont {
    width: 100px;
    height: 50px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

  /* 走马灯 */
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
